<template>
	<view class="goods-item-wp">
		<view class="goods-info flex_start_center" @click.stop="goToGoodsDetail(item)" v-for="(item,index) in list"
			:key="index">
			<view class="left">
				<image :src="item.pic" mode="" style="width: 160rpx;height: 160rpx;border-radius: 16rpx;">
				</image>
			</view>
			<view class="right flex-1">
				<view class="title u-line-2">
					{{item.prodName}}
				</view>
				<view class="price-wp">
					￥ {{item.price}}/{{item.units}}
				</view>
			</view>
			<view class="number">
				x {{item.totalStocks?item.totalStocks:1000}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: ['list', 'goodsOpenId'],
		methods: {
			goToGoodsDetail({
				prodId
			}) {
				uni.navigateTo({
					url: `/pagesMall/mallCenter/mallCenterDetail?id=${prodId}&openId=${this.goodsOpenId}&fromGiftDetail=1`
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods-item-wp {
		border-top: 40rpx solid #f7f8fa;
		border-bottom: 40rpx solid #f7f8fa;

		.goods-info {
			padding-bottom: 24rpx;
			height: 160rpx;
			background-color: #fff;
			margin: 24rpx 32rpx;
			border-bottom: 1px solid #eee;

			.right {
				margin-left: 24rpx;

				.title {
					width: 412rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #1D2129;
					line-height: 45rpx;

				}

				.price-wp {
					margin-top: 16rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #FF3131;
					line-height: 50rpx;

				}



			}

			.number {
				width: 50rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #1D2129;
				line-height: 34rpx;

			}


		}
	}
</style>